<template>
  <div>
    <select>
      <option
        value=""
        v-for="catalog in catalogs"
        v-bind:key="catalog.id"
      >{{catalog.txt}}</option>
      <br>
    </select>
    <select v-model="cur_pro">
      <option
        v-for="(prov) in province"
        v-bind:key="prov.id"
        v-bind:value="prov.provinceid"
      >{{prov.province}}</option>
    </select>
    <select v-if="city.length!=0">
      <option
        v-for="(item) in city"
        v-bind:key="item.id"
        v-bind:value="item.cityid"
      >{{item.city}}</option>
    </select>
  </div>
</template>

<script>
import { SERVER } from "@/config";
export default {
  name: "reg",
  data() {
    return {
      catalogs: [],
      province: [],
      city: [],
      cur_pro:0
    };
  },
  async created() {
    {
      //   catalog
      let res = await fetch(SERVER + "api/account_catalog");
      res = await res.json();
      this.catalogs = res;
    }
    {
      // 省份
      let res = await fetch(SERVER + "api/get_province");
      res = await res.json();
      this.province = res;
      this.cur_pro = this.province[0].provinceid;
    }
    {
      // 城市
      let res = await fetch(
        SERVER + `api/get_city/${this.province[0].provinceid}`
      );
      res = await res.json();
      this.city = res;
    }
  },
  methods: {
    set_city(index) {
      alert(index);
    }
  },
  components: {},
  watch: {
      async cur_pro(newVal,oldVal){
          if(oldVal!=0){
              // 城市
            let res = await fetch(
                SERVER + `api/get_city/${newVal}`
            );
            res = await res.json();
            this.city = res;
          }
      }
  },
};
</script>

<style scoped>
</style>
